<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="author" content="买文博">
    <meta name="" content="">
    <script src='jquery-3.1.1.js'></script>
    <link rel="stylesheet" href="change.css">
    <script src="change.js"></script>
    <link rel="stylesheet" href="popupInsert.css">
    <script src="popupInsert.js"></script>
    <script src="jquery.cookie.js"></script>
    <title>Document</title>

    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body {
            font-family: 微软雅黑, 'Microsoft YaHei', 宋体;
            background-color: #f1f2f3;
        }

        header {
            min-width: 1217px;
        }

        header ul li {
            list-style: none;
            z-index: 2;
            height: 88px;
            margin: 0 10px;
            position: relative;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        header {
            width: 100%;
            background-color: #fff;
            height: 88px;
        }

        nav {
            width: 1217px;
            margin: 0 auto;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        .logo-box {
            width: 134px;
            height: 52px;
            margin-top: 20px;
            margin-right: 40px;
        }

        nav {
            position: relative;
        }

        nav ul li {
            float: left;
            line-height: 88px;
        }

        nav ul li a {
            font-size: 16px;
            color: rgb(51, 51, 51);
            padding: 0 10px;
            display: inline-block;
            line-height: 88px;
        }

        .header-r {
            width: 232px;
            height: 88px;
        }

        .join {
            height: 57px;
            line-height: 23px;
            padding-top: 32px;
        }

        .join a {
            display: block;
            color: #333;
            font-size: 14px;
            position: relative;
            margin-left: 21px;
        }

        .join a:hover i {
            background-image: url(pic/icon.png);
            background-position: -72px -262px;
        }

        .login {
            width: 138px;
            height: 88px;
            line-height: 87px;
        }

        .login a {
            padding: 0 10px;
            /*color: #333;*/
            font-size: 14px;
        }

        .shop-icon {
            width: 18px;
            height: 17px;
            background: url(pic/icon.png) no-repeat 0 -25px;
            display: inline-block;
            position: absolute;
            top: 4px;
            left: -21px;
        }

        header a:hover {
            color: #00b369;
        }

        .banner {
            height: 346px;
            min-width: 1217px;
            width: 100%;
            position: relative;
        }

        .search-box {
            width: 750px;
            height: 75px;
            z-index: 10000;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 103px;
            margin: auto;
            border: 3px solid rgba(0, 0, 0, 0.1);
            border-radius: 3px;
        }

        .search-box input {
            height: 69px;
            outline: none;
            line-height: 69px;
            float: left;
            font-size: 16px;
            width: 613px;
            border: 0;
            padding: 0 0 0 28px;
            font-family: "微软雅黑";
            margin-left: 2px;
            margin-top: 2px;
        }

        .search {
            width: 106px;
            height: 69px;
            margin-top: 2px;
            background-color: #00a460;
            background-image: url('pic/search.png');
            background-repeat: no-repeat;
            background-position: center;
        }

        .search-list {
            width: 642px;
            height: 417px;
            border: 1px solid #00b369;
            position: absolute;
            left: 2px;
            top: 70px;
            background-color: #fff;
            z-index: 10000;
            box-sizing: border-box;
            padding-top: 6px;
            text-align: left;
            padding-left: 4px;
            display: none;
        }

        .search-list .history {
            width: 614px;
            height: 80px;
            padding-left: 20px;
            float: left;
            display: block;
        }

        .history span {
            display: inline-block;
            font-size: 14px;
            color: #636363;
            margin-top: 3px;
        }

        .history_a a {
            display: block;
            float: left;
            height: 30px;
            line-height: 30px;
            border: 1px #e2e2e2 solid;
            background: #f6f6f6;
            font-size: 14px;
            color: #333;
            padding-left: 11px;
            padding-right: 11px;
            margin-bottom: 21px;
            margin-right: 8px;
            margin-top: 10px;
        }

        .history_a a:hover {
            background-color: #00b369;
            color: #fff;
        }

        .all-history {
            width: 638px;
            height: 321px;
            clear: both;
            overflow: hidden;
            border-top: 1px #e2e2e2 solid;
            margin-left: -23px;
        }

        .search-item {
            display: inline-block;
            font-size: 14px;
            color: #636363;
            margin-left: 20px;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .hot {
            display: block;
            padding-left: 10px;
            clear: both;
            margin-top: -10px;
            height: 35px;
        }

        .hot:hover {
            background-color: #ebebeb;
        }

        .rank {
            width: 17px;
            height: 17px;
            text-align: center;
            line-height: 17px;
            color: #fff;
            background: #bcc2c4;
            font-size: 14px;
            font-family: "Arial";
            -moz-border-radius: 3px;
            -webkit-border-radius: 3px;
            border-radius: 3px;
            margin: 10px;
        }

        .rank-hot {
            background-color: #ff6214;
        }

        .hot-content {
            color: #b2b2b2;
            width: 450px;
            height: 35px;
            text-decoration: none;
            line-height: 35px;
        }

        .search-number {
            width: 110px;
            height: 35px;
            padding: 0;
            margin: 0;
            line-height: 35px;
        }

        .tab {
            background-color: #fff;
            position: absolute;
            box-shadow: -1px -2px 5px #aaa;
            z-index: 100001;
            top: 80px;
            padding: 0 28px 0 38px;
            padding-bottom: 20px;
        }

        .tab-top a:hover {
            color: #333;
        }

        .tab-top {
            height: 62px;
            line-height: 62px;
        }

        .tab1 {
            width: 456px;
            left: 149px;
            display: none;
        }

        .tab1 .san {
            width: 16px;
            height: 9px;
            background: url(pic/icon.png) no-repeat 0 -56px;
            position: absolute;
            top: -9px;
            left: 55px;
        }

        .number-green {
            color: #00b369;
            padding-left: 4px;
            padding-right: 2px;
            line-height: 62px;
            font-size: 16px;
        }

        .tab-tit {
            display: inline;
            font-size: 16px;
        }

        .tab-bottom {
            border-top: 1px solid #eee;
            padding-top: 5px;
            text-align: left;

        }

        .tab-bottom ul li {
            height: 30px;
            line-height: 30px;
            padding: 0;
            margin: 0px;
        }

        .tab-bottom ul li a {
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding: 0;
            width: 150px;
            color: #7f7f7f;
        }

        .tab-bottom ul li a:hover {
            color: #00b369;
        }

        .tab2 {
            width: 458px;
            left: 248px;
            display: none;
        }

        .tab2 .san {
            width: 16px;
            height: 9px;
            background: url(pic/icon.png) no-repeat 0 -56px;
            position: absolute;
            top: -9px;
            left: 55px;
        }

        .tab3 {
            width: 455px;
            left: 388px;
            display: none;
        }

        .tab3 .san {
            width: 16px;
            height: 9px;
            background: url(pic/icon.png) no-repeat 0 -56px;
            position: absolute;
            top: -9px;
            left: 55px;
        }

        .tab4 {
            left: 489px;
            width: 456px;
            display: none;
        }

        .tab4 .san {
            width: 16px;
            height: 9px;
            background: url(pic/icon.png) no-repeat 0 -56px;
            position: absolute;
            top: -9px;
            left: 55px;
        }

        .tips-wrap {
            min-width: 1217px;
            width: 100%;
            background-color: #fff;

        }

        .tips {
            height: 54px;
            width: 1217px;
            margin: 0 auto;
        }

        .tips p {
            font-size: 14px;
            background: #fff;
            font-family: "微软雅黑", "Microsoft YaHei", "宋体";
            color: #7f7f7f;
            margin-left: 28px;
        }

        .tip-content {
            width: 378px;
            height: 50px;
            line-height: 50px;
            margin-top: 4px;
        }

        .tip-promote {
            width: 542px;
            height: 50px;
            line-height: 50px;
            color: #7f7f7f;
            font-size: 14px;
            margin-top: 4px;
        }

        .number-orange {
            color: #ff7200
        }

        .dl {
            width: 92px;
            height: 50px;
            display: inline-block;
            margin-left: 40px;
        }

        #dl1 {
            width: 106px;
            margin: 0;
        }

        .dd {
            background: url(pic/icon.png) no-repeat 0 -70px;
            width: 24px;
            height: 24px;
            display: inline-block;
            margin-right: 12px;
            margin-top: 14px;
            font-size: 12px;
        }

        .classify {
            width: 1227px;
            margin: 20px auto;
            color: #00b369;
            font-size: 18px;
            text-align: center;
        }

        .classify a {
            display: block;
            width: 192px;
            height: 106px;
            background-color: #fff;
            margin-right: 9px;
            margin-left:3px;
        }

        .classify a:hover {
            background-color: #00b369;
        }

        .classify a:hover .classify-info {
            color: white;
        }

        .classify-icon {
            width: 30px;
            height: 30px;
            display: block;
            margin: 30px auto 12px;
            background-size: 25px 24px;

        }

        .icon1 {
            background: url(pic/icon.png) no-repeat -67px 6px;
        }

        .classify a:hover.icon1 {
            background: url(pic/icon.png) no-repeat -36px 6px;
        }

        .classify a:hover .icon2{
            background: url(pic/icon.png) no-repeat -64px -20px;
        }
        .icon2 {
            background: url(pic/icon.png) no-repeat -30px -20px;
        }

        .icon3 {
            background: url(pic/icon.png) no-repeat -33px -53px;
        }
        .classify a:hover .icon3{
            background: url(pic/icon.png) no-repeat -67px -53px;
        }

        .icon4 {
            background: url(pic/icon.png) no-repeat -35px -84px;
        }
        .classify a:hover .icon4{
            background: url(pic/icon.png) no-repeat -73px -84px;
        }

        .icon5 {
            background: url(pic/icon.png) no-repeat -32px -115px;
        }
        .classify a:hover .icon5{
            background: url(pic/icon.png) no-repeat -64px -115px;
        }

        .icon6 {
            background: url(pic/icon.png) no-repeat -32px -145px;
        }
        .classify a:hover .icon6{
            background: url(pic/icon.png) no-repeat -63px -145px;
        }

        .classify-info {
            color: #00b369;
        }

        .recomd {
            width: 1217px;
            margin: 0 auto;
        }

        .tit-box {
            width: 200px;
            height: 84px;
            line-height: 84px;
            margin-top:140px;
        }

        .recomd-icon {
            margin-right: 20px;
            vertical-align: -5px;
            margin-top: 30px;
            background: url(pic/icon.png) no-repeat -33px -196px;
            width: 28px;
            height: 23px;
            display: inline-block;
            overflow: hidden;
        }

        .tit-box span {
            height: 84px;
            line-height: 84px;
            font-size: 20px;
            color: #000;
            margin-right: 18px;
            display: inline-block;
        }

        .reg-box {
            height: 430px;
            width: 568px;
            background-color: #fff;
            position: absolute;
            top: 200px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 100001;
            display: none;
        }

        .login-box {
            height: 430px;
            width: 568px;
            background-color: #fff;
            position: absolute;
            top: 200px;
            left: 0;
            right: 0;
            margin: auto;
            z-index: 100001;
            display: none;
        }

        .reg-header {
            height: 40px;
            width: 130px;
            background: url('pic/fixed-logo.png') no-repeat center;
            margin: 20px auto;
        }

        .reg-body {
            width: 100%;
            height: 350px;
            background-color: #fff;
        }

        .reg-aside {
            width: 267px;
            height: 280px;
            background-color: #fff;
            margin-left: 43px;
            margin-top: 20px;
            border-top: 1px solid #e2e2e2;
        }

        .reg-aside .input {
            margin-top: 20px;
            height: 36px;
            width: 267px;
            outline: none;
            padding: 0;
            box-sizing: border-box;
            border: 1px solid #e2e2e2;
            padding-left: 16px;
            line-height: 36px;
        }

        #checkbox {
            margin-top: 14px;
            margin-bottom: 14px;
        }

        #reg-lable {
            font-size: 14px;
            margin-left: 7px;
            color: #b2b2b2;
        }

        .reg-btn, .login-btn {
            width: 267px;
            height: 36px;
            background-color: #00a460;
            color: #fff;
            border: none
        }

        .aside-title {
            position: absolute;
            top: 89px;
            left: 135px;
            background-color: #fff;
            padding: 0 10px;
            color: #b2b2bd;
        }

        .reg-bottom a {
            font-size: 14px;
        }

        .reg-bottom span {
            display: inline-block;
            line-height: 62px;
            font-size: 14px;
            color: #7f7f7f;
            margin-left: 50px;
        }

        .fence {
            height: 280px;
            position: absolute;
            width: 1px;
            background-color: #e2e2e2;
            left: 346px;
            top: 100px;
        }

        .other-login {
            width: 155px;
            border-top: 1px solid #e2e2e2;
            height: 280px;
            /*background-color:#ff6700;*/
            margin-right: 30px;
            margin-top: 20px;
        }

        .other-login-title {
            position: absolute;
            background-color: #fff;
            padding: 0 10px;
            color: #b2b2bd;
            left: 410px;
            top: 92px;
        }

        .other-login a {
            display: block;
        }

        .qq {
            height: 84px;
            width: 84px;
            border-radius: 50%;
            background: url(pic/icon2.png) no-repeat -14px -14px;

            margin: 20px auto;
        }

        .weixin {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: url(pic/icon2.png) no-repeat -7px -104px;
            background-size: 304px 264px;
            position: absolute;
        }

        .weibo {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: url(pic/icon2.png) no-repeat -174px -106px;
            background-size: 304px 264px;
            position: absolute;
            left: 500px;
        }

        .close {
            background-color: #00a460;
            position: absolute;
            width: 20px;
            height: 20px;
            right: 10px;
            top: 10px;
            background: url(pic/icon.png) no-repeat -1px -396px;
        }

        #mask {
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 100000;
            background-color: rgba(0, 0, 0, 0.4);
            display: none;
        }

        .bricks {
            margin-top: -75px;
            background-color: #fff;
            height: 400px;
            padding: 70px 0 20px 20px;
        }

        .brick {
            width: 272px;
            height: 182px;
            position: relative;
            margin: 0 22px 34px 0px;
            transition: all .2s;
            overflow: hidden;
            float: left;
        }

        .b1 {
            background-image: url('pic/01.jpg');
            margin-left:10px;
        }

        .b2 {
            background-image: url('pic/02.jpg');
        }

        .b3 {
            background-image: url('pic/03.jpg');
        }

        .b4 {
            background-image: url('pic/04.jpg');
        }

        .b4 {
            background-image: url('pic/04.jpg');
        }

        .b5 {
            background-image: url('pic/05.jpg');
            margin-left:10px;
        }

        .b6 {
            background-image: url('pic/06.jpg');
        }

        .b7 {
            background-image: url('pic/07.jpg');
        }
        .b8 {
            background-image: url('pic/08.jpg');
        }
        .brick-mask{
            width: 272px;
            height: 182px;
            background-color: rgba(0,0,0,0.4);
            position: relative;
            text-align: center;
            transform: translate(0,139px);
            line-height: 43px;
        }
        .brick:hover .brick-mask{
            transform: translate(0);
            transition: 0.3s linear;
            line-height: 139px;
        }
        .brick-tit{
            color:white;

        }
        .brick-a{
            display: block;
            color:#fff;
            width: 92px;
            height: 30px;
            background-color: #00b369;
            line-height: 30px;
            position: absolute;
            left:89px;
            top:85px;
        }
        .icon1:hover{

        }
    </style>
</head>

<body>

<header>
    <nav>
        <div class="logo-box fl">
            <img class="logo" src="pic/logo.png" alt="">
        </div>
        <ul class="nav-ul">
            <li><a href="">背景墙</a></li>
            <li><a href="">平面|广告设计</a></li>
            <li><a href="">PPT模板</a></li>
            <li><a href="">全部分类</a></li>
            <li><a href="">VIP素材</a></li>
        </ul>
        <div class="header-r fr">
            <div class="join fl"><a href=""><i class="shop-icon"></i>开店赚钱</a></div>
            <div class="login fr"><a class="login-a" href="javascript:;" style="margin-left:23px">登录</a>|<a
                    class="reg-a" href="javascript:;"
                    style="margin-left: 2px">注册</a>
            </div>
        </div>
        <div class="tabs">
            <div class="tab tab1">
                <div class="tab-top">
                    <div class="san"></div>
                    <h3 class="tab-tit"><a href="">背景墙|装饰画</a></h3><span class="number-green">899615</span>张
                </div>
                <div class="tab-bottom">
                    <ul>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                        <li><a href="JavaScript:;">电视背景墙</a></li>
                    </ul>
                </div>
            </div>
            <div class="tab tab2">
                <div class="tab-top">
                    <div class="san"></div>
                    <h3 class="tab-tit"><a href="">平面|广告设计</a></h3><span class="number-green">2222225</span>张
                </div>
                <div class="tab-bottom">
                    <ul>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                        <li><a href="JavaScript:;">展板设计</a></li>
                    </ul>
                </div>
            </div>
            <div class="tab tab3">
                <div class="tab-top">
                    <div class="san"></div>
                    <h3 class="tab-tit"><a href="">PPT模板</a></h3><span class="number-green">289884</span>张
                </div>
                <div class="tab-bottom">
                    <ul>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                    </ul>
                </div>
            </div>
            <div class="tab tab4">
                <div class="tab-top">
                    <div class="san"></div>
                    <h3 class="tab-tit"><a href="">全部作品</a></h3><span class="number-green">3,692,949</span>张
                </div>
                <div class="tab-bottom">
                    <ul>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                        <li><a href="JavaScript:;">商务通用</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    <div class="reg-box">
        <div class="reg-header">
        </div>
        <div class="close"></div>
        <div class="reg-body">
            <div class="reg-aside fl">
                <div class="aside-title">
                    站内注册
                </div>
                <input type="text" name="account" class="input reg-account" placeholder="手机或邮箱">
                <input type="text" name="password1" class="input reg-password" placeholder="密码必须包含数字或字母,至少8位">
                <input type="text" name="password2" class="input confirm-password" placeholder="确认密码">
                <input type="checkbox" id="checkbox"><label id="reg-lable" for="checkbox">同意《注册须知》《版权声明》</label>
                <button class="reg-btn">确认注册</button>
                <div class="reg-bottom">
                    <a class="number-green" href="">忘记密码？</a><span class="">已有账号？</span><a class="number-green fr"
                                                                                           href="">立即登录</a>
                </div>
            </div>
            <div class="fence"></div>
            <div class="other-login fr">
                <div class="other-login-title">第三方登录</div>
                <a class="qq"></a>
                <a class="weixin"></a>
                <a class="weibo"></a>
            </div>
        </div>
    </div>

    <div class="login-box" style="height:330px;overflow:hidden">
        <div class="reg-header">
        </div>
        <div class="close"></div>
        <div class="reg-body">
            <div class="reg-aside fl">
                <div class="aside-title" style="left:110px">
                    我图网账号登录
                </div>
                <input type="text" name="account" class="input login-account" placeholder="手机/邮箱/用户名/企业名">
                <input type="text" name="password" class="input login-password" placeholder="输入密码">
                <br><br>
                <button class="login-btn">确认登录</button>
                <div class="reg-bottom">
                    <a class="number-green" href="">忘记密码？</a><span class="">没有账号？</span><a class="number-green fr"
                                                                                           href="">立即注册</a>
                </div>
            </div>
            <div class="fence"></div>
            <div class="other-login fr">
                <div class="other-login-title">第三方登录</div>
                <a class="qq"></a>
                <a class="weixin"></a>
                <a class="weibo"></a>
            </div>
        </div>
    </div>
    <div id="mask">

    </div>

</header>
<div class="banner">
    <div class="search-box">
        <input type="text" class="fl" placeholder="请输入标题、关键词、编号搜索">
        <a href="javascript:;" class="search fl"></a>
        <div class="search-list">
            <div class="history">
                <span>历史搜索</span>
                <div class="history_a">
                    <a href="">背景墙</a><a href="">十八届六中全会</a><a href="">学生</a>
                </div>
                <div class="all-history">

                    <span class="search-item">大家都在搜</span>

                    <div class="hot">
                        <div class="rank rank-hot fl">1</div>
                        <a class="hot-content">双11</a>
                        <span class="search-number fr">18645结果</span>
                    </div>
                    <div class="hot" style="clear:both">
                        <div class="rank rank-hot fl">2</div>
                        <a class="hot-content">2017年日历</a>
                        <span class="search-number fr">18645结果</span>
                    </div>
                    <div class="hot" style="clear:both">
                        <div class="rank rank-hot fl">3</div>
                        <a class="hot-content">十八届六中全会</a>
                        <span class="search-number fr">18645结果</span>
                    </div>

                    <div class="hot" style="clear:both">
                        <div class="rank fl">4</div>
                        <a class="hot-content">长征胜利80周年</a>
                        <span class="search-number fr">18645结果</span>
                    </div>

                    <div class="hot" style="clear:both">
                        <div class="rank fl">5</div>
                        <a class="hot-content">文化墙</a>
                        <span class="search-number fr">18645结果</span>
                    </div>
                    <div class="hot" style="clear:both">
                        <div class="rank fl">6</div>
                        <a class="hot-content">商务PPT</a>
                        <span class="search-number fr">18645结果</span>
                    </div>
                    <div class="hot" style="clear:both">
                        <div class="rank fl">7</div>
                        <a class="hot-content">家和富贵</a>
                        <span class="search-number fr">18645结果</span>
                    </div>
                    <div class="hot" style="clear:both">
                        <div class="rank fl">8</div>
                        <a class="hot-content">片头片尾</a>
                        <span class="search-number fr">18645结果</span>
                    </div>


                </div>
            </div>
        </div>
    </div>

    <div id="wrap">
        <!--<img src="prev.png" class="prev cut" alt="">-->
        <div class="prev cut"></div>
        <div class="ppt-box">
            <div id="p1" class="ppt"></div>
            <div class="p2 ppt"></div>
            <div class="p3 ppt"></div>
            <div class="p4 ppt"></div>
            <div class="p5 ppt"></div>
        </div>
        <!--<img src="next.png" class="next cut" alt="">-->
        <div class="next cut"></div>
        <ul class="dot">
            <li id="l1" class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</div>
<div class="tips-wrap">
    <div class="tips">
        <div class="tip-content fl"><p class="fl">我图网会员数<span class="number-orange">19,695,028</span>人</p>
            <p class="fl">作品总数： <span class="number-orange">3,692,949</span> 张</p></div>
        <div class="tip-promote fr">
            <div class="dl" id="dl1">
                <div class="dd fl"></div>
                <div class="dt fl">原创可商用</div>
            </div>
            <div class="dl">
                <div class="dd fl"></div>
                <div class="dt fr">海量更新</div>
            </div>
            <div class="dl">
                <div class="dd fl"></div>
                <div class="dt fr">高速下载</div>
            </div>
            <div class="dl">
                <div class="dd fl"></div>
                <div class="dt fr">完美售后</div>
            </div>
        </div>
    </div>
</div>
<div class="classify">
    <a class="fl">
        <div class="classify-icon icon1"></div>
        <span class="classify-info">背景墙</span>
    </a>
    <a class="fl" href="">
        <div class="classify-icon icon2"></div>
        <span class="classify-info">平面|广告设计</span>
    </a>
    <a class="fl" href="">
        <div class="classify-icon icon3"></div>
        <span class="classify-info">PPT模板</span>
    </a>
    <a class="fl" href="">
        <div class="classify-icon icon4"></div>
        <span class="classify-info">淘宝设计</span>
    </a>
    <a class="fl" href="">
        <div class="classify-icon icon5"></div>
        <span class="classify-info">视频素材</span>
    </a>
    <a class="fl" href="">
        <div class="classify-icon icon6"></div>
        <span class="classify-info">更多分类</span>
    </a>
</div>
<div class="recomd">
    <div class="tit-box">
        <div class="recomd-icon"></div>
        <span>精选专题推荐</span>
    </div>
    <div class="bricks">
        <div class="brick b1">
            <div class="brick-mask">
                <span class="brick-tit">2017鸡年素材</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b2">
            <div class="brick-mask">
                <span class="brick-tit">珠宝背景墙</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b3">
            <div class="brick-mask">
                <span class="brick-tit">工作总结PPT</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b4">
            <div class="brick-mask">
                <span class="brick-tit">精品无框画</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b5">
            <div class="brick-mask">
                <span class="brick-tit">震撼片头模板</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b6">
            <div class="brick-mask">
                <span class="brick-tit">十八届六中全会</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b7">
            <div class="brick-mask">
                <span class="brick-tit">淘宝双11素材</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
        <div class="brick b8">
            <div class="brick-mask">
                <span class="brick-tit">颁奖晚会</span>
                <a class="brick-a" href="">点击查看></a>
            </div>
        </div>
    </div>
</div>
<script>

    $('body').on('click', '.reg-a', function () {
        $('.reg-box').show();
        $('#mask').show();
    })

    $('body').on('click', '.login-a', function () {
        $('.login-box').show();
        $('#mask').show();
    })


    $('.close').mouseleave(function () {
        $(this).css({
            transform: 'rotate(0deg)',
            transition: '0.25s linear'
        })
    })
    $('.close').mouseenter(function () {
        $(this).css({
            transform: 'rotate(-360deg)',
            transition: '0.25s linear'
        })

    })
    $('.close').click(function () {
        $(this).parent().hide();
        $('#mask').hide();
    })
    $('#mask').click(function () {
        $(this).hide();
        $('.reg-box').hide();
        $('.login-box').hide();
    })


    var a = {
        transition: '0.25s linear',
        speed: 3000
    }

    $.change(a);
    $('.nav-ul li').hover(function () {
        var i = $('.nav-ul li').index($(this));
        if (i <= 3) {
            $('.tab:eq(' + i + ')').show().siblings().hide();
        }
    })
    var stop;
    $('.nav-ul li').mouseleave(function () {
        var i = $('.nav-ul li').index($(this));
        stop = setTimeout(function () {
            $('.tab:eq(' + i + ')').hide();
        }, 500);
    })
    $('.tab').mouseenter(function () {
        clearInterval(stop);
    })
    $('.tab').mouseleave(function () {
        $(this).hide();
    })

    $('.search-box input').click(function () {
        $('.search-list').show();
    })
    $('.search-box input').blur(function () {
        $('.search-list').hide();
    })
</script>

<script>
    if ($.cookie('user')) {
        console.log('有cookie')
        $('.login').text('')
        $('.login').children().remove();
        $('.login').html('<a href="javascript">' + $.cookie('user') + '</a><a class="exit">退出</a>')
    }
    $('body').on('click', '.exit', function () {
        $.cookie('user', '')
        $('.login').html('<a class="login-a" href="javascript:;" style="margin-left:23px">登录</a>|<a class="reg-a" href="javascript:;"style="margin-left: 2px">注册</a>')
        $.popup('退出成功')
    })
    $('.reg-btn').click(function () {
        var account = $('.reg-account').val().trim();
        var password1 = $('.reg-password').val().trim();
        var password2 = $('.confirm-password').val().trim();
        $('.close').trigger('click');
        $.get('/reg', {account: account, password1: password1, password2: password2}, function (res, state, xhr) {
            if (state == 'success') {
                console.log('连接服务器成功')
                if (xhr.status == 200) {
                    console.log('收到服务器响应')
                    $.popup(res.code);
                    $('.reg-account').val('');
                    $('.reg-password').val('');
                    $('.confirm-password').val('');
                }
            }
        })
    })
    $('.login-btn').click(function () {
        var account = $('.login-account').val().trim();
        var password = $('.login-password').val().trim();
        $('.close').trigger('click');
        $.get('/login', {account: account, password: password}, function (res, state, xhr) {
            if (state == 'success') {
                console.log('连接服务器成功')
                if (xhr.status == 200) {
                    console.log('收到服务器响应')
                    $.popup(res.code)
                    if (res.data) {
                        $.cookie('user', res.data);
                        $('.login-account').val('');
                        $('.login-password').val('');
                        $('.login').text('')
                        $('.login').children().remove();
                        $('.login').html('<a href="javascript">' + $.cookie('user') + '</a><a class="exit">退出</a>')
                    }
                }
            }
        })
    })
</script>
</body>
</html>